/**
 * 基础菜单 商品管理
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">商品</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <!-- form -->
      <el-form
        :inline="true"
        :model="searchGoods"
        class="demo-form-inline"
        size="small">
        <el-form-item label="商品名称">
          <el-input v-model="searchGoods.name" placeholder="商品名称"></el-input>
        </el-form-item>
        <el-form-item label="商品分类">
          <!-- 这里对category表进行数据回显，显示问二级分类 -->
           <el-cascader
            v-model="category3Ids"
            :options="options" clearable></el-cascader>
        </el-form-item>
        <el-form-item label="商品品牌">
          <el-select v-model="searchGoods.brandId" placeholder="商品品牌" clearable>
             <el-option
                  v-for="item in brandData" :key="item.id" :label="item.name" :value="item.id"
                  ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="goodsPageList()" plain icon="el-icon-search">查询</el-button>
        </el-form-item>
      </el-form>

      <!-- table -->
      <el-table :data="goodsTabData" style="width: 100%">
        <el-table-column label="编号" prop="id"> </el-table-column>
        <el-table-column label="商品图片">
          <template slot-scope="scope">
            <el-image
            style="width: 100px; height: 50px"
            :src="scope.row.image"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="商品名称" prop="name"> </el-table-column>
        <el-table-column label="货号" prop="sn">
          <template slot-scope="scope">
            货号：{{scope.row.sn}}
          </template>
        </el-table-column>
        <el-table-column label="标签">
          <template slot-scope="scope">
            上架:
            <el-switch
              v-model="scope.row.isMarketable"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="1"
              inactive-value="0" @change="StandUpAndDown(scope.row);scope.row.isMarketable == '1' ? $message.success('上架'): $message.error('下架')">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="SKU库存">
          <!-- TODO 待完善 -->
          <template>
            <el-button icon="el-icon-notebook-2" size="small" type="primary" plain></el-button>
          </template>
        </el-table-column>
        <el-table-column label="销量" prop="saleNum"> </el-table-column>
        <el-table-column label="审核状态">
          <template slot-scope="scope">
            {{scope.row.status == '0' ? "未审核" : "已审核"}}<br/>
            <el-link type="primary" @click="queryAuditInfo(scope.row)">审核详情</el-link>
          </template>
        </el-table-column>
        <el-table-column align="right" width="200">
          <template slot="header">
            <!-- 跳转添加商品 -->
            <router-link to="/goods/goods_edit">
              <el-button type="primary" size="small" plain icon="el-icon-circle-plus-outline">添加商品</el-button>
            </router-link>
          </template>
          <template slot-scope="scope">
            <el-button size="mini" @click="lookOver(scope.row)" >查看</el-button>&nbsp;&nbsp;
            <el-button size="mini" @click="handleEdit(scope.row)" >编辑</el-button>&nbsp;&nbsp;
            <el-button size="mini" @click="goodsLog(scope.row)">日志</el-button>&nbsp;&nbsp;
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)" plain>删除</el-button>&nbsp;&nbsp;
          </template>
        </el-table-column>
      </el-table>
       <!-- 分页插件 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[8, 16, 32, 64]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>
    <el-dialog
        title="审核详情"
        :visible.sync="auditDialogVisible"
        width="30%"
        :before-close="auditHandleClose">
        {{AuditInfo.id}}<br/>
        这是一个待完善的功能，数据库关联数据/数据库未提供tab
           <!-- <el-table
            :data="AuditInfo"
            border
            style="width: 100%">
            <el-table-column
              prop="auditDate"
              label="审核时间"
              width="180">
            </el-table-column>
            <el-table-column
              prop="auditUser"
              label="审核人员"
              width="180">
            </el-table-column>
            <el-table-column
              prop="status"
              label="审核结果">
            </el-table-column>
            <el-table-column
              prop="message"
              label="反馈信息">
            </el-table-column>
          </el-table> -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="auditDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="auditDialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>

export default {
  data () {
    return {
      searchGoods: {}, // 查询的条件参数
      goodsTabData: [], // 表格数据
      pageNum: 0,
      pageSize: 8,
      total: 0,
      dialogVisible: false,
      title: 'add',
      showData: {}, // 回显数据
      brandData: [], // 商品品牌
      options: [], // 商品分类
      category3Ids: [],
      AuditInfo: {}, // 审核详情信息
      auditDialogVisible: false
    }
  },
  created () {
    this.menthodBrandData()
    this.goodsPageList()
  },
  methods: {
    async StandUpAndDown (row) {
      // 上下架处理,根据id先查询然后去修改状态
      if (row.isMarketable == 1) {
        const { data: res } = await this.$http.put(`/goods/spu/put?id=${row.id}`)
      } else {
        const { data: res } = await this.$http.put(`/goods/spu/pull/${row.id}`)
      }
    },
    lookOver () {
      alert('不需要实现的功能')
    },
    auditHandleClose () {
      this.auditDialogVisible = false
    },
    // 审核信息 TODO 需创建审核信息表将spu和user关联数据
    async queryAuditInfo (row) {
      const { data: res } = await this.$http.get(`/goods/spu/findById/${row.id}`)
      this.AuditInfo = res.data.spu
      this.auditDialogVisible = true
    },
    goodsLog () {
      alert('数据库未提供相关的table')
    },
    // 回显商品分类的联动信息
    async menthodOptions () {
      const { data: res } = await this.$http.get('/goods/category/list')
      // console.log(res)
      this.options = res.data.list
    },
    // 回显商品品牌
    async menthodBrandData () {
      const { data: res } = await this.$http.get('/goods/brand/list')
      this.brandData = res.data.list
      this.menthodOptions()
    },
    // 分页查询
    async goodsPageList () {
      if (this.category3Ids.length > 0) { this.searchGoods.category3Id = this.category3Ids[this.category3Ids.length - 1] }
      const { data: res } = await this.$http.post(`/goods/spu/pageQueryByAll/${this.pageNum}/${this.pageSize}`, this.searchGoods)
      // console.log(res)
      this.goodsTabData = res.data.pageUtils.rows
      this.total = res.data.pageUtils.total
    },
    // 编辑回显 TODO
    handleEdit (row) {

    },
    // 删除
    async handleDelete (row) {
      const { data: res } = await this.$http.delete(`/goods/spu/deleteByIdSpu/${row.id}`)
      if ( res.code == 200) this.$message.success('删除成功')
      this.goodsPageList()
    },
    // 上一页、下一页
    handleSizeChange (newSize) {
      this.pageSize = newSize
      this.goodsPageList()
    },
    handleCurrentChange (newNum) {
      this.pageNum = newNum
      this.goodsPageList()
    }
  }
}

</script>

<style scoped>
</style>

 
 